<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
    <style type="text/css">
        .navbar-nav li.divider:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 14px;
            background-color: #a4a4a4;
            top: 18px;
            right: 0;
        }

        .carousel-indicators li {
            background-color: rgba(167, 167, 167, 0.5);
        }
    </style>
</head>
<body>
<div id="app">
    <div class="panel-heading">
        <h4 v-if="role==1">用户中心</h4>
        <h4 v-if="role==0">用户修改</h4>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" role="form">
            <div class="form-group" v-if="user.role!==0">
                <label for="username" class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" placeholder="昵称" v-model="user.userName"
                           required>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" placeholder="密码"
                           v-model="user.password" required>
                </div>
            </div>
            <div class="form-group">
                <label for="password2" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password2" placeholder="密码"
                           v-model="password2" required>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" placeholder="邮箱" v-model="user.email">
                </div>
            </div>
            <div class="form-group">
                <label for="phone" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="phone" placeholder="手机号" v-model="user.phone">
                </div>
            </div>
            <input type="button" class="btn btn-primary" value="修改" @click="updateUser()">
        </form>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user: {},
            role: "",
            password2: ''
        },
        created() {
            this.isLogin();
            this.getUser();
        },
        methods: {
            isLogin() {
                axios.get('/user').then(res => {
                    if (res.data.data === null) {
                        alert("请先登录！");
                        location.href = '/login.html';
                    } else {
                        this.user = res.data.data;
                        this.user.password = '';
                    }
                })
            },
            getUser() {
                let id = new URLSearchParams(window.location.search).get("id");
                if (id == undefined) {
                    id = 0;
                }
                axios.get(`/user/getUser/${id}`)
                    .then(resp => {
                        console.log(resp.data)
                        this.user = resp.data.message;
                        this.user.password = '';
                        this.role = resp.data.role;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            updateUser() {
                let regex = /^(?=.*[a-z])[a-z\d\u4E00-\u9FA5]{4,20}$/;
                if (!regex.test(this.user.userName)) {
                    alert("昵称格式不正确");
                    return;
                }
                regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/;
                if (!regex.test(this.user.password)) {
                    alert("密码格式不正确");
                    return;
                }
                if (this.password2 !== this.user.password) {
                    alert('两次密码不一致');
                    return;
                }
                axios.put("/user/update", this.user)
                    .then(resp => {
                        alert('修改成功');
                        if (this.role === 1) {
                            location.href = '/front/main.html';
                        } else if (this.role === 0) {
                            location.href = '../content.html';
                        }
                    }).catch(error => {
                    console.log(error)
                });
            }
        }
    })
</script>
</body>
</html>